Add Charts to Our JavaScript App with Anychart — Bubble, Bullet, and Column Charts

Anychart is an easy to use library that lets us add chart into our JavaScript web app.

In this article, we’ll look at how to create basic charts with Anychart.

Bubble Charts

We can create bubble charts easily with Anychart.

For instance, we can write the following HTML:

<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></script>
<div id="container" style="width: 500px; height: 400px;"></div>

Then we can write the following JavaScript code:

const chart = anychart.cartesian();
const data = [
  ["2000", 1100, 1],
  ["2001", 880, 2],
  ["2002", 1100, 5],
  ["2003", 1500, 3],
  ["2004", 921, 3],
];

chart.bubble(data);
chart.title("Bubble Chart");
chart.xAxis().title("Years");
chart.yAxis().title("Sales");
chart.container("container");
chart.draw();

The script tag is for adding the Anychart library.

The div is the container for rendering the chart.

anychart.cartesian lets us create a chart.

The data is in the data array.

The first value of each entry is the x-axis value.

The 2nd value is the y-axis value.

The 3rd is the radius of the bubble.

chart.bubble takes the data we’re rendering.

chart.title sets the title.

chart.xAxis().title sets the x-axis label.

chart.yAxis().title sets the y-axis label.

chart.container sets the ID of the container element to render the chart in.

chart.draw draws the chart.

Bullet Chart

To create a bullet chart, we write the following HTML:

<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></script>
<script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-bullet.min.js"></script>

<div id="container" style="width: 500px; height: 400px;"></div>

We need to add a library for creating the bullet chart via the 2nd script tag.

Then we can create the chart by writing:

const chart = anychart.bullet([{
  value: 630
}]);
chart.range().from(0).to(750);
chart.layout('vertical');
chart.container("container");
chart.draw();

We call anychart.bullet to create the chart.

chart.range has the value range for the chart.

chart.layout has the orientation of the bar.

chart.container sets the ID of the container element to render the chart in.

chart.draw draws the chart.

Column Chart

We can create a column chart by writing:

const data = [
  ["apple", 100],
  ["orange", 120],
  ["grape", 130],
];

const chart = anychart.column();
const series = chart.column(data);
chart.container("container");
chart.draw();

anychart.column create the column chart.

chart.column takes the data for the chart.

The rest of the code is the same as the previous examples.

We can set the fill color of the columns.

For instance, we can write:

const data = [
  ["apple", 100],
  ["orange", 120],
  ["grape", 130],
];

const chart = anychart.column();
const series = chart.column(data);
series.normal().fill("#0066cc");
series.hovered().fill("#0066cc", 2);
series.selected().fill("#0066cc", 4);
chart.container("container");
chart.draw();

We set the fill color of the bars with the fill method for in response to various actions.

Also, we can set the outline color in response to various actions with the stroke method:

const data = [
  ["apple", 100],
  ["orange", 120],
  ["grape", 130],
];

const chart = anychart.column();
const series = chart.column(data);
series.normal().stroke("#0066cc");
series.hovered().stroke("#0066cc", 2);
series.selected().stroke("#0066cc", 4);
chart.container("container");
chart.draw();

And the hatchFill method lets us add a hatched background to the columns:

const data = [
  ["apple", 100],
  ["orange", 120],
  ["grape", 130],
];

const chart = anychart.column();
const series = chart.column(data);
series.normal().hatchFill("forward-diagonal", "#0066cc", 1, 15);
series.hovered().hatchFill("forward-diagonal", "#0066cc", 1, 15);
series.selected().hatchFill("forward-diagonal", "#0066cc", 1, 15);
chart.container("container");
chart.draw();

Conclusion

We can add bubble charts, bullet charts, and column charts with Anychart.